<template>
    <ul class="hotList">
      <li class="list__item"  @click="toSongList(item.id)" v-for="item in rankList" :key= "item.id">
        <mRankItemVue :rankListItem="item"></mRankItemVue>
      </li>
    </ul>
</template>
<script setup>
import { useRouter } from 'vue-router';
import mRankItemVue from './m-rank-item.vue';
import { defineProps } from "vue";
defineProps({
  rankList:Array
})


const router = useRouter()
// 跳转至歌曲详情
const toSongList = (val) => {
  router.push({name:'SongList', params: { id:val }})
}
</script>
<style lang="stylus" scoped>
.hotList
  overflow-y scroll
  margin-top 10px
  .list__item
    margin-bottom 12px
    display flex
</style>